
<template lang="pug">
.detail
  .detail-header
    .iconfont.icon-back(@click="$router.back()")
    .detail-header-title  深圳杰恩创意设计-供应商综合能力调查表
  .detail-content
    .detail-section
      .section-title
        span 供应商（制造商）概况
        span.line
      .section-body
        .table-item-row.flex
          .table-item-col.flex
            .table-item-label.border.border-right.border-bottom.flex.flex-center 统一社会信用代码
            .table-item-value.border.border-right.border-bottom.flex.flex-center {{detail.supplierStorageDetail.creditCode}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.border-right.flex.flex-center 企业名称
            .table-item-value.border.border-bottom.flex.flex-center.flex-1
              .supplier-logo(v-if="detail.supplierStorageDetail.logo", :style="`background-image: url(${detail.supplierStorageDetail.logo})`")
              .supplier-name {{detail.supplierStorageDetail.companyName}}
        .table-item-row.flex
          .table-item-col.flex
            .table-item-label.border.border-right.border-bottom.flex.flex-center 法定代表人
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.operName}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 注册资本
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.registeredFund}}万人民币
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 注册时间
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{new Date(detail.supplierStorageDetail.createTime).format('yyyy-MM-dd')}}
        .table-item-row.flex
          .table-item-col.flex
            .table-item-label.border.border-right.border-bottom.flex.flex-center 联系方式
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.mobile}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 是否一般纳税人
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.generalTaxpayer}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 是否需要开票
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.needBilling}}
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 公司官网
            .table-item-value.border.border-bottom.flex.flex-1.flex-center
              a(:href="detail.supplierStorageDetail.companyUrl" target="_blank") {{detail.supplierStorageDetail.companyUrl}}
        .table-item-row.flex
          .table-item-col.flex
            .table-item-label.border.border-right.border-bottom.flex.flex-center 企业负责人
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.personsInChargeOfCompany}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 企业负责人联系方式
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.personsInChargeOfCompanyPhone}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 企业负责人邮箱
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.personsInChargeOfCompanyMail}}
        .table-item-row.flex
          .table-item-col.flex
            .table-item-label.border.border-right.border-bottom.flex.flex-center 销售负责人
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.saleInChargeOfCompany}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 销售负责人联系方式
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.saleInChargeOfCompanyPhone}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 销售负责人邮箱
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.saleInChargeOfCompanyMail}}
        .table-item-row.flex
          .table-item-col.flex
            .table-item-label.border.border-right.border-bottom.flex.flex-center 业务负责人
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.headOfSales}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 业务负责人联系方式
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.headOfSalesPhone}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 业务负责人邮箱
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.headOfSalesMail}}
        .table-item-row.flex
          .table-item-col.flex
            .table-item-label.border.border-right.flex.flex-center 质量负责人
            .table-item-value.border.border-right.flex.flex-1.flex-center {{detail.supplierStorageDetail.qualityInChargeOfCompany}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.flex.flex-center 质量负责人联系方式
            .table-item-value.border.border-right.flex.flex-1.flex-center {{detail.supplierStorageDetail.qualityInChargeOfCompanyPhone}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.flex.flex-center 质量负责人邮箱
            .table-item-value.border.flex.flex-1.flex-center {{detail.supplierStorageDetail.qualityInChargeOfCompanyMail}}
      .section-body
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 经营产品品牌
            .table-item-value.border.border-bottom.flex.flex-1.flex-center
              .brand-tag(v-for="item in detail.supplierStorageDetail.supplierBrand") {{item}}
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 产品手册
            .table-item-value.border.border-bottom.flex-1
              .file-item.flex.flex-center(v-for="item in detail.supplierStorageDetail.productFileList")
                .file-item-name {{item.fileName}}
                .file-item-icon.flex.flex-center
                  a.iconfont.icon-download(target='_blank' :href="item.fileUrl")
                  a.iconfont.icon-see(@click="onlineView(item)")
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 主营产品介绍
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.productIntroduce}}
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 业务覆盖范围
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.businessCoverage}}
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 产品定位
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.productPositioning}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 企业年销售额
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.productTotalSale}}万人民币
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 一般交货周期
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.deliveryDay}}天
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 是否进入深圳建筑工务署
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.inDepartment}}
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 所在甲方品牌库
            .table-item-value.border.border-bottom.flex.flex-1.flex-center
              .brand-tag(v-for="item in detail.supplierStorageDetail.partyABrandList") {{item.brand}}
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 所在甲方战采（集采）库
            .table-item-value.border.border-bottom.flex.flex-1.flex-center
              .brand-tag(v-for="item in detail.supplierStorageDetail.partyACollection") {{item.collection}}
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 所在施工单位品牌库
            .table-item-value.border.border-bottom.flex.flex-1.flex-center 
              .brand-tag(v-for="item in detail.supplierStorageDetail.constructionBrandList") {{item.collection}}
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.flex.flex-center(:class="{ 'border-bottom' : detail.supplierStorageDetail.customerList.length }") 所在施工单位战采（集采）库
            .table-item-value.border.flex.flex-1.flex-center(:class="{ 'border-bottom' : detail.supplierStorageDetail.customerList.length }")
              .brand-tag(v-for="item in detail.supplierStorageDetail.constructionCollection") {{item.collection}}
        .table-item-row.flex(v-if="detail.supplierStorageDetail.customerList.length")
          .table-item-col.flex.flex-1
            .table-item-label.border.border-bottom.flex.flex-1.flex-center.wdith 产品应用领域及主要客户简介：
        .table-item-row.flex(v-for="(item, index) in detail.supplierStorageDetail.customerList")
          .table-item-col.flex
            .table-item-label.border.border-right.flex.flex-center(:class="{ 'border-bottom': index != detail.supplierStorageDetail.customerList.length - 1 }") 客户名称：
            .table-item-value.border.border-right.flex.flex-1.flex-center {{item.customerName}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.flex.flex-center 使用材料品种规格
            .table-item-value.border.border-right.flex.flex-1.flex-center {{item.specification}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.flex.flex-center 年订货额（万元）
            .table-item-value.border.flex.flex-1.flex-center {{item.annualOrderAmount}}
    .detail-section
      .section-title
        span 供应商生产概况
        span.line
      .section-body
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 员工总人数
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.totalEmployees}}人
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 管理人员人数
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.management}}人
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 技术人员人数
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.technician}}人
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 工人人员人数
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.worker}}人
        .table-item-row.flex
          .table-item-col.flex
            .table-item-label.border.border-right.border-bottom.flex.flex-center 设备总台（套）数
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.totalEquipmentNumber}}套
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 进口总台（套）数
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.importedEquipmentNumber}}套
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 国产总台（套）数
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.domesticNumber}}套
        .table-item-row.flex
          .table-item-col.flex
            .table-item-label.border.border-right.border-bottom.flex.flex-center 固定资产
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.fixedAssets}}万元人民币
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 年生产产能
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.annualProductionCapacity}}万元人民币
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 新品研发能力
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.researchProductivity}}
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 主要原材料名称及来源
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.materialOriginal}}
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.flex.flex-center 主要生产设备名称、产地、价值：
            .table-item-value.border.flex.flex-1.flex-center {{detail.supplierStorageDetail.otherInformation}}
    .detail-section
      .section-title
        span 质量保证能力
        span.line
      .section-body
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center.white 质量、职业健康安全、环境管理体系的认证
            .table-item-value.border.border-bottom.flex.flex-1.flex-center
              .brand-tag(v-for="item in detail.supplierStorageDetail.qualificationsList") {{item.qualifications}}
        .table-item-row.flex
          .table-item-col.flex
            .table-item-label.border.border-right.border-bottom.flex.flex-center 是否拥有工艺、质量文件
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.fileCompleted}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 质检机构名称
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.inspectionOrganizationName}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 专职质量人员数
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.supplierQualificationNumber}}人
        .table-item-row.flex
          .table-item-col.flex
            .table-item-label.border.border-right.border-bottom.flex.flex-center 检测设备总台（套）数
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.qualityTotalEquipmentNumber}}台（套）
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 进口设备总台（套）数
            .table-item-value.border.border-right.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.qualityImportedEquipmentNumber}}台（套）
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 国产设备总台（套）数
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.qualityDomesticNumber}}台（套）
        .table-item-row.flex
          .table-item-col.flex
            .table-item-label.border.border-right.flex.flex-center 主要检测设备名称
            .table-item-value.border.border-right.flex.flex-1.flex-center {{detail.supplierStorageDetail.qualityEquipmentName}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.flex.flex-center 主要检测设备产地
            .table-item-value.border.border-right.flex.flex-1.flex-center {{detail.supplierStorageDetail.qualityPlace}}
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.flex.flex-center 主要检测设备价值
            .table-item-value.border.flex.flex-1.flex-center {{detail.supplierStorageDetail.qualityValue}}
    .detail-section
      .section-title
        span 环境保护、社会责任、职业健康与安全体系
        span.line
      .section-body
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 是否通过质量管理体系认证
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.passedQualityCertification}}
        .table-item-row.flex(v-if="detail.supplierStorageDetail.qualityCertificationFileList.length")
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 相关报告证书
            .table-item-value.border.border-bottom.flex.flex-1.flex-center.flex-warp
              .img-file-item(v-for="item in detail.supplierStorageDetail.qualityCertificationFileList" @click="exportWord(item)")
                .file-item-mask
                  .iconfont.el-icon-zoom-in
                img(:src="item.fileUrl")
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 是否通过职业健康安全管理体系认证
            .table-item-value.border.border-bottom.flex.flex-1.flex-center {{detail.supplierStorageDetail.passedHealthCertification}}
        .table-item-row.flex(v-if="detail.supplierStorageDetail.healthCertificationFileList.length")
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 相关报告证书
            .table-item-value.border.border-bottom.flex.flex-1.flex-center.flex-warp
              .img-file-item(v-for="item in detail.supplierStorageDetail.healthCertificationFileList" @click="exportWord(item)")
                .file-item-mask
                  .iconfont.el-icon-zoom-in
                img(:src="item.fileUrl")
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.flex.flex-center(:class="{ 'border-bottom': detail.supplierStorageDetail.environmentCertificationFileList.length }") 是否通过环境管理体系认证
            .table-item-value.border.flex.flex-1.flex-center(:class="{ 'border-bottom': detail.supplierStorageDetail.environmentCertificationFileList.length }") {{detail.supplierStorageDetail.passedEnvironmentCertification}}
        .table-item-row.flex(v-if="detail.supplierStorageDetail.environmentCertificationFileList.length")
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.flex.flex-center 相关报告证书
            .table-item-value.border.flex.flex-1.flex-center.flex-warp
              .img-file-item(v-for="item in detail.supplierStorageDetail.environmentCertificationFileList" @click="exportWord(item)")
                .file-item-mask
                  .iconfont.el-icon-zoom-in
                img(:src="item.fileUrl")
    .detail-section
      .section-title
        span 相关证书资料
        span.line
      .section-body
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 营业执照
            .table-item-value.border.border-bottom.flex.flex-1.flex-center.flex-warp
              .img-file-item(v-for="item in detail.supplierStorageDetail.businessLicenseFileList" @click="exportWord(item)")
                .file-item-mask
                  .iconfont.el-icon-zoom-in
                img(:src="item.fileUrl")
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.border-bottom.flex.flex-center 代理商（贸易商）需提供代理证书
            .table-item-value.border.border-bottom.flex.flex-1.flex-center.flex-warp
              .img-file-item(v-for="item in detail.supplierStorageDetail.proxyCertificateFileList" @click="exportWord(item)")
                .file-item-mask
                  .iconfont.el-icon-zoom-in
                img(:src="item.fileUrl")
        .table-item-row.flex
          .table-item-col.flex.flex-1
            .table-item-label.border.border-right.flex.flex-center 公司简介
            .table-item-value.border.flex-1
              .file-item.flex.flex-center(v-for="item in detail.supplierStorageDetail.companyFileList")
                .file-item-name {{item.fileName}}
                .file-item-icon.flex.flex-center
                  a.iconfont.icon-download(target='_blank' :href="item.fileUrl")
                  a.iconfont.icon-see(@click="onlineView(item)")
  .upload-footer
      el-button(v-if="detail.supplierStorageDetail.reviewStatus == 1" @click="refuse" class="upload-refuse") 审核拒绝                  
      el-button(v-if="detail.supplierStorageDetail.reviewStatus == 1" @click="agree" class="upload-save") 审核通过
  refuse-supplier-dialog(:show="showRefuseDialog" @close="closeRefuse" @confirm="confirm")                
</template>

<script>
import { getSupplierStoragePage,reviewSupplierStorage,getPdfByCategory,previewByCategory } from 'api'
import { mapActions } from 'vuex'
import refuseSupplierDialog from '@/components/modal/refuseSupplierDialog'
export default {
  name: 'supplierDetail',
  data () {
    return {
      reviewStatus:'',
      companyName:'',
      detail: {
        supplierStorageDetail:{
          productFileList:[],
          companyFileList:[],
          environmentCertificationFileList:[],
          healthCertificationFileList:[],
          qualityCertificationFileList:[],
          businessLicenseFileList:[],
          proxyCertificateFileList:[],
          partyABrandList:[],
          partyACollection:[],
          constructionBrandList:[],
          constructionCollection:[],
          qualificationsList:[],
          customerList:[]
        },           
        orderInfo: {},
        orderList: {
          detail: []
        },
        orderLogistic: {}
      },
      showRefuseDialog: false
    }
  },
  components: {
    refuseSupplierDialog
  },
  methods: {
    ...mapActions([
      'changePreviewModal'
    ]),
    objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 合并单元格
      if (columnIndex === 4) {
        if (rowIndex % 100 === 0) {
          return {
            rowspan: 100,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    async getDetail () {
      try {
        const { ResultSet } = await this.$axios.post(getSupplierStoragePage, { storageId: this.$route.params.id })
        this.detail = ResultSet.userData
        // this.status00 = ResultSet.userData.supplierStorageDetail.reviewStatus
        // console.log("审核状态："+ this.status00)
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async onlineView (item) {
      window.open(`/pdf/web/viewer.html?file=${encodeURIComponent(item.fileUrl)}`)
    },
    async exportWord (item) {
      this.changePreviewModal({ url: item.fileUrl, show: true })
    },
    agree () {    
      this.$confirm('是否审核通过该申请？', '审核通过', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(async () => {
        try {
          await this.$axios.post(reviewSupplierStorage, { storageIds: [this.$route.params.id], reviewStatus: 2 })
          this.$message.success('审核成功！')
          this.$router.back()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    refuse () {
      this.showRefuseDialog = true
    },
    closeRefuse () {
      this.showRefuseDialog = false
    },
    async confirm (rejectReason) {
      try {
        let query = {
          storageIds: [this.$route.params.id],
          reviewStatus: 3
        }
        if (rejectReason) query.rejectReason = rejectReason
        await this.$axios.post(reviewSupplierStorage, { ...query })
        this.showRefuseDialog = false
        this.$message.success('审核成功！')
        this.$router.back()
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    // async getDetail () {
    //   try {
    //     const { ResultSet } = await this.$axios.post(getCaseDetail, { materialCaseId: this.$route.params.id })
    //     this.detail = ResultSet.userData
    //     this.caseList = this.detail.picture[this.defaultIndex].materialsList
    //   } catch (err) {
    //     console.log(err)
    //     this.$message.error(err.message || err.ResultSet.errors)
    //   }
    // }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getDetail()
    })
  }
} 
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  min-height: 100%;
  background: #fff;
  border: 1px solid #F3F3F4;
  box-sizing: border-box;
  box-shadow: 0px 4px 0px #F3F3F4;
  border-radius: 10px;
}
.detail-header {
  display: flex;
  align-items: center;
  padding: 23px 40px;
  border-bottom: 1px solid #EDEDED;
  .iconfont {
    font-size: 24px;
    color: #B2B4C7;
    margin-right: 12px;
    cursor: pointer;
  }
  .detail-header-title {
    font-size: 18px;
    line-height: 26px;
    color: #3E4373;
  }
}
.upload-footer {
  padding-bottom: 32px;
  height: 100px;
  padding-top:32px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px -1px 0px 0px #D9D9D9;
  .upload-refuse{
    background: #F6F6F9;
    margin-right:24px;
    border-radius: 6px;
    border:none;
  }
  .upload-save {
    margin:32px 0;
    background:#FF708B;
    color:#fff;
    border-radius: 6px;
    border:none;
  }
}
.detail-content {
  padding: 20px;
}
.section-title {
  display:flex;
  align-items: center;
  position: relative;
  font-size: 18px;
  line-height: 26px;
  color: #B2B4C7;
  margin-bottom: 16px;
  .line{
    flex:1;
    height: 1px;
    background: #ededed;
    margin-left: 8px;
  }
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 10px;
    background: #B2B4C7;
    border-radius: 8px;
    z-index: 2;
  }
  span {
    position: relative;
    z-index: 1;
    display: inline-block;
    background: #fff;
    padding: 0 8px 0 12px;
  }
  .section-title-line {
    width: 100%;
    height: 1px;
    background: #EDEDED;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}
.flex {
  display: flex;
}
.flex-center {
  align-items: center;
}
.flex-warp {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1;
}
.table-item-label {
  width: 257px;
  padding: 17px 24px;
  font-size: 14px;
  font-weight: 700;
  color: #64698F;
  line-height: 22px;
  white-space: nowrap;
  background: linear-gradient(0deg, #F8F7FC, #F8F7FC), #F8F7FC;
  &.white {
    white-space: normal;
  }
  &.width {
    width: 100%
  }
}
.border {
  border: 1px solid #EDEDED;
}
.border-left {
  border-left: none;
}
.border-right {
  border-right: none;
}
.border-bottom {
  border-bottom: none;
}
.border-top {
  border-top: none;
}
.table-item-value {
  padding: 17px 24px;
  background: #fff;
  font-size: 14px;
  color: #3E4373;
  line-height: 22px;
  min-width: 257px;
  a {
    color: #2A82E4;
  }
}
.supplier-logo {
  width: 100px;
  height: 100px;
  margin-right: 17px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.section-body {
  margin-bottom: 32px;
}
.file-item {
  padding: 4px 0;
}
.file-item-name {
  font-size: 14px;
  line-height: 22px;
  color: #3E4373;
  min-width: 400px;
  padding-right: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-item-icon {
  .iconfont {
    display: inline-block;
    font-size: 24px;
    margin: 0 9px;
    cursor: pointer;
    color: #3E4373;
  }
}
.brand-tag {
  padding: 1px 10px;
  font-size: 14px;
  line-height: 22px;
  color: #3E4373;
  background: rgba(134, 118, 255, 0.1);
  border-radius: 6px;
  margin-right: 15px;
}
.img-file-item {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  margin-bottom: 10px;
  position: relative;
  img {
    max-width: 100%;
    max-height: 100%;
  }
  &:hover {
    .file-item-mask {
      display: flex;
    }
  }
  .file-item-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    .iconfont {
      font-size: 24px;
      color: #fff;
    }
  }
}
</style>
